<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .content {
            padding: 20px;
        }

        .item {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
            border-radius: 8px;
        }

        .van-field {
            width: 50%;
        }

        .van-field:nth-child(1) {
            width: 100%;
        }

        .van-field__label {
            margin-right: 8px;
            width: auto;
        }

        .number {
            text-align: center;
            margin-right: 8px;
            width: 2em;
            height: 2em;
            background-color: #1989fa;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .value {
            text-align: left;
            color: #4A4A4A;
            font-weight: 500;
            font-size: 18px;
        }

        #safeTop .van-button__content .van-button__icon {
            color: #323233;
        }

        .van-popup {
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .van-popup .van-button {
            margin: auto;
            width: 80%;
        }

        .van-button--small,
        .van-button--default {
            margin-left: 10px;
        }

        .nav-barRight {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 8px;
            display: flex;
            align-items: center;
            /* margin: auto 8px auto auto; */

        }

        .nav-barRight .van-button {
            margin: 0 10px;
        }

        .Addbutton {
            padding: 0 20px;
        }

        .table table tr th {

            text-align: center;
            color: #fff;
            height: 34px;
            padding: 0 5px;
            border: 1px solid #808080;
            background-color: #4ba2f9;
            white-space: nowrap;
            position: static;

        }

        .table table tr td {
            text-align: center;
            height: 34px;
            white-space: nowrap;
            padding: 0 5px;
            border: 1px solid #808080;
            color: #000;
            position: relative;
            overflow-x: scroll;
        }




        .newlineDiv {
            white-space: normal;
            word-wrap: break-word;
            word-break: break-all;
        }

        .table table tr:active td {
            color: #000;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box" id="box">
            <div class="van-nav-bar" id="safeTop">
                <div class="van-nav-bar__content">
                    <div class="van-nav-bar__left" @click="onClickLeft">
                        <i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i>
                    </div>
                    <div class="van-nav-bar__title van-ellipsis">
                        {{name + '列表'}}
                    </div>
                    <div class="nav-barRight">
                        <van-button class="Addbutton" size="small" type="default" @click='batchTrace'
                            v-show='selectedItems.length > 0'>批量绑定 </van-button>
                        <van-button size="small" type="default" icon="search" @click="searchShow = true">搜索</van-button>
                        <van-button class="Addbutton" size="small" type="default" @click="Addsubmit">新增
                        </van-button>
                    </div>

                </div>
            </div>
            <div class="content">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div class="table">
                        <table>
                            <tr>
                                <th width='5%'></th>
                                <th width='13%'>绑定日期</th>
                                <th width='22%'>派工单号</th>
                                <th width='16%'>产品编号</th>
                                <th width='22%'>产品型号</th>
                                <th width='10%'>计划数量</th>
                                <th width='18%'>绑定状态</th>
                            </tr>
                            <tr v-for="(item,index) in tableData" :key="index" @click="intoItem(item)">
                                <td width='5%' @click.stop>

                                    <div class="newlineDiv">
                                        <van-checkbox shape="square" style="display: flex;justify-content: center;"
                                            :checked="selectedItems.includes(item.id)" v-model="item.checked"
                                            :disabled="shouldDisableCheckbox(item)" @click.stop
                                            @change="toggleSelect(item,index)">
                                        </van-checkbox>
                                    </div>


                                </td>
                                <td width='13%'>
                                    <div class="newlineDiv"><span>{{item.BillDate}}</span></div>
                                </td>
                                <td width='22%'>
                                    <div class="newlineDiv"><span>{{item.JobOrderNO}}</span></div>
                                </td>
                                <td width='16%'>
                                    <div class="newlineDiv"><span>{{item.ProductCode}}</span></div>
                                </td>
                                <td width='22%'>
                                    <div class="newlineDiv"><span>{{item.ProductSpec}}</span></div>
                                </td>
                                <td width='10%'>
                                    <div class="newlineDiv"><span>{{item.FPlanQty}}</span></div>
                                </td>
                                <td width='18%'>
                                    <div class="newlineDiv"><span
                                            :style="getBindStyleByID(item.BindStatus)">{{getBindNameByID(item.BindStatus)}}</span>
                                    </div>
                                </td>
                            </tr>
                        </table>

                    </div>
                    <!-- <div class="item" v-for="(item, index) in tableData" @click="intoItem(item)">
                        <div class="van-cell van-field" style="display: flex;align-items: center;">

                            <div class="van-cell__title van-field__label number">
                                <span>{{index + 1}}</span>
                            </div>
                            <div class="van-cell__value van-field__value value" @click.stop>
                                <div style="display: flex;align-items: center;">
                                    <van-checkbox shape="square" :checked="selectedItems.includes(item.id)"
                                        v-model="item.checked" :disabled="shouldDisableCheckbox(item)" @click.stop
                                        @change="toggleSelect(item,index)">
                                    </van-checkbox>
                                    <span style="margin-left: 8px ;">
                                        {{item.ProductCode}}

                                    </span>

                                </div>

                            </div>

                        </div>
                        <van-field v-model="item.BillDate" label="绑定日期：" readonly></van-field>
                        <van-field v-model="item.JobOrderNO" label="派工单号：" placeholder="派工单号" readonly></van-field>
                        <van-field v-model="item.ProductSpec" label="产品型号：" placeholder="产品型号" readonly>
                        </van-field>
                        <van-field v-model="item.FPlanQty" label="计划数量：" placeholder="计划数量" readonly>
                        </van-field>
                        <van-field v-model="item.BindStatusName" label="绑定状态：" placeholder="绑定状态" readonly
                            class="BindStatusfield" :style="getBindStyleByID(item.BindStatus)">
                        </van-field>
                    </div> -->
                </van-list>
            </div>
            <audio id="audioPlayer" preload="auto">
                <source src="../image/aigei_com.mp3" type="audio/mpeg">
            </audio>
            <div class="indexBottom">
                汇智云创 技术支持
            </div>
        </div>
        <van-popup v-model="searchShow" position="bottom">
            <van-field v-model="filterData.JobOrderNO" label="派工单号:" placeholder="请输入派工单号"></van-field>
            <van-field v-model="filterData.ProductName" label="产品信息:" placeholder="请输入产品信息"></van-field>


            <van-field v-model="filterData.FBDate" label="开始时间：" placeholder="请选择开始时间" readonly
                @click="handlerDate('开始时间')"></van-field>
            <van-field v-model="filterData.FEDate" label="结束时间：" placeholder="请选择结束时间" readonly
                @click="handlerDate('结束时间')"></van-field>
            <van-button size="small " type="info" @click="handlerSearch">确认</van-button>
        </van-popup>
        <van-popup v-model="dateShow" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" title="选择操作日期" @confirm="confirmDate"
                @cancel="dateShow = false"></van-datetime-picker>
        </van-popup>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        var FNScanner = api.require('FNScanner');
        var scanTC27 = api.require('scanTC27');

        api.addEventListener({
            name: 'refreshbatchTraceList'
        }, function (ret) {
            vm.filterData.PageIndex = 0
            vm.tableData = []
            vm.getDataList()
        })
        api.addEventListener({
            name: 'getCDAlarmLList'
        }, function (ret) {
            APP.getCDAlarmLList()
        })

        api.addEventListener({
            name: 'getYCKBDataLiist'
        }, function (ret) {
            APP.getYCKBDataLiist()
        })
        vm = new Vue({
            el: '#app',
            data: {
                selectedItems: [], // 存储选中行的索引
                name: api.pageParam.name,
                tableData: [],
                loading: false,
                finished: false,
                filterData: {
                    PageIndex: 0,
                    PageSize: 30,
                    FBDate: APP.getFormatbeforDate(),
                    FEDate: APP.getFormatDate(new Date()).split(' ')[0],

                    JobOrderID: 0,
                    JobOrderNO: '',
                    ProductName: '',
                    EquipmentID: 0,
                    EquipmentName: '',
                    FWorkshopID: 1027

                },
                searchShow: false,
                currentDateVal: '',
                dateShow: false,
                currentDate: new Date(),
            },
            created: function () {
                var that = this;
                var classID = JSON.parse(window.localStorage.getItem('userInfo')).classID

                if (classID == 'C') {
                    that.filterData.EquipmentID = '53'
                }
                else {
                    that.filterData.EquipmentID = '54'
                }
                that.getDataList()
                window.localStorage.setItem('pageName', JSON.stringify(that.name))
            },
            mounted() {
                APP.setSafeTop()
                APP.setPage()
            },
            methods: {
                getBindStyleByID(id) {
                    let obj = {

                    }
                    switch (id) {
                        case 0:
                            obj = {
                                color: 'red  !important'
                            }
                            break;
                        case 1:
                            obj = {
                                color: '#fcc105  !important'
                            }
                            break;
                        case 2:
                            obj = {
                                color: 'green  !important'
                            }
                            break;
                        default:
                            obj = {}
                    }

                    return obj
                },
                getBindNameByID(id) {
                    let name = ''
                    switch (id) {
                        case 0:
                            name = '未绑定'
                            break;
                        case 1:
                            name = '部分绑定'
                            break;
                        case 2:
                            name = '全部绑定'
                            break;
                        default:
                            name = ''
                    }

                    return name
                },
                shouldDisableCheckbox(item) {
                    if (this.selectedItems.length === 0) return false;
                    const currentProductSpec = item.ProductSpec;
                    return this.selectedItems.some(selectedId => {
                        const selectedItem = this.tableData.find(c => c.id === selectedId);
                        return selectedItem.ProductSpec !== currentProductSpec;
                    });
                },


                // 修正后的单选方法
                toggleSelect(item, idx) {
                    var that = this
                    console.log('点击');

                    console.log(JSON.stringify(item));
                    const index = this.selectedItems.indexOf(item.id)
                    if (index > -1) {
                        this.selectedItems.splice(index, 1) // 修正第二个参数为1

                    } else {
                        this.selectedItems.push(item.id)
                    }

                },
                batchTrace() {
                    var that = this

                    console.log('点击');

                    // 使用Set提升查询性能
                    const selectedSet = new Set(this.selectedItems)
                    const filteredData = this.tableData.filter(item =>
                        selectedSet.has(item.id)
                    )

                    console.log(JSON.stringify(filteredData));

                    var TraceID = filteredData.map(item => item.TraceID).join('~')

                    console.log(JSON.stringify(TraceID));

                    api.openWin({
                        name: 'batchTraceDetail',
                        url: 'batchTraceDetail.html',
                        pageParam: {
                            name: that.name,

                            TraceID: TraceID

                        }
                    })

                },
                Addsubmit() {
                    var that = this

                    api.openWin({
                        name: 'batchTraceDetail',
                        url: 'batchTraceDetail.html',
                        pageParam: {
                            name: that.name,

                        }
                    })
                },
                onClickLeft() {
                    var that = this
                    api.closeWin()
                    api.sendEvent({
                        name: 'refreshIndexList'
                    })
                },
                onLoad() {
                    var that = this
                    console.log(JSON.stringify(that.filterData));
                    that.filterData.PageIndex++
                    that.getDataList()
                },
                getDataList() {
                    var that = this
                    that.loading = true
                    var obj = that.filterData
                    console.log('obj', JSON.stringify(that.filterData))
                    APP.ajax('batchTraceList', obj, function (res) {
                        console.log('res', JSON.stringify(res))
                        res.ds.map((item, index) => {
                            item.id = index
                            item.checked = false
                            item.BindStatusName = that.getBindNameByID(item.BindStatus)
                        })
                        console.log('res', JSON.stringify(res.ds))

                        that.tableData = that.tableData.concat(res.ds)
                        that.searchShow = false
                        that.loading = false
                        if (res.ds.length < that.filterData.PageSize) {
                            that.finished = true
                        }
                    })
                },
                handlerDate(str) {
                    var that = this
                    that.dateShow = true
                    that.currentDateVal = str
                },
                confirmDate() {
                    var that = this
                    if (that.currentDateVal == '开始时间') {
                        that.filterData.FBDate = APP.getFormatDate(that.currentDate).split(' ')[0]

                    } else {
                        that.filterData.FEDate = APP.getFormatDate(that.currentDate).split(' ')[0]
                    }
                    that.dateShow = false
                },
                handlerSearch() {
                    var that = this
                    that.tableData = []
                    that.finished = false
                    that.filterData.PageIndex = 0
                    that.getDataList()
                },
                intoItem(row) {
                    var that = this
                    console.log(JSON.stringify(row));
                    api.openWin({
                        name: 'batchTraceDetail',
                        url: 'batchTraceDetail.html',
                        pageParam: {
                            name: that.name,
                            TraceID: row.TraceID
                        }
                    })
                }
            }
        })
    };
</script>

</html>